<template>
  <view class="container">
    <view class="container_box">
      <!-- 选择门店 -->
      <van-cell v-if="isLogin && !userInfo.isUser" title="选择门店" :value="shopName.deptName?shopName.deptName:'请选择'"
        is-link @click="navTo('/pages/shop/list')" />
      <!-- 选择宠物 -->
      <van-cell title="选择宠物" :value="selectName" is-link @click="petShowClick" />
      <!-- 记录时间 -->
      <van-cell title="记录时间" :value="recordItem.recordingTime" is-link @click="TimeShowClick" />

      <block v-for="(item,i) in labelItem.configs" :key="i">
        <!-- 喝水吃饭分量单选 -->
        <view class="selection" v-if="item.valueType == 'radio'">
          <view class="selection_title">
            {{item.label}}
          </view>
          <view class="selection_box">
            <text :class="['selection_box_Item',recordItem.attributeType == item1?'active':'']"
              v-for="(item1,i1) in item.value" :key="i1" @click="selectionClick(item1)">
              {{item1}}
            </text>
          </view>
        </view>
        <!-- 下拉选择 -->
        <van-cell v-if="item.valueType == 'select'" :title="item.label" :value="recordItem.attributeType" is-link
          @click="systemShow = true" />
        <!-- 输入框 -->
        <van-field v-if="item.valueType == 'input'" :value="recordItem.attribute" :label="item.label"
          :placeholder="'请输入'+item.label+'名字'" input-align="right" @input="InputClick($event,i)" />
      </block>

      <!-- 描述 -->
      <view class="describe">
        <view class="describe_title">
          描述
        </view>
        <view class="container_input">
          <textarea class="container_input_box" v-model="recordItem.remarks" maxlength="200"
            placeholder-style="color:rgba(61, 61, 61, 0.5)" placeholder="添加相关描述..." @input="textareaInput" />
          <text class="container_input_abso">{{textareaList}}/200</text>
          <!-- <image class="minImage" src="/static/picture.png" mode="widthFix"></image> -->
          <!-- <image class="minImage minImage1" src="/static/invite.png" mode="widthFix"></image> -->
        </view>
      </view>

      <!-- 添加图片 -->
      <view class="container_image paddingleft">
        <block v-if="sliderImgs.length != 0">
          <view class="container_image_box" v-for="(item,i) in sliderImgs" :key="i">
            <image :src="item.link" mode="aspectFill"></image>
            <image class="minImage" src="/static/images/mine/no.png" mode="aspectFill"
              @click="CloseImage(sliderImgs,i)">
            </image>
          </view>
        </block>
        <view class="container_image_addbox" @click="getImg(sliderImgs)">
          <view class="container_image_add">
            <image src="/static/add.png" mode="widthFix"></image>
          </view>
          <text v-if="sliderImgs.length == 0">添加图片/视频</text>
        </view>
      </view>
    </view>

    <!-- 按钮 -->
    <view class="container_btn">
      <button type="default" @click="addPublished">立即发布</button>
    </view>

    <!-- 下拉列表 体重~体温 -->
    <van-popup :show="systemShow" round position="bottom" custom-style="height: 50%" @close="systemShow = false">
      <van-picker :columns="labelItem.configs[0].value" show-toolbar @confirm="oncolumnsConfirm"
        @cancel="oncolumnsClose" />
    </van-popup>

    <!-- 选择宠物 -->
    <van-popup :show="petShow" round position="bottom" custom-style="height: 50%" @close="petClose">
      <van-picker title="选择宠物" show-toolbar :columns="petList" @confirm="petConfirm" @cancel="petShow = false">
      </van-picker>
    </van-popup>

    <!-- 选择时间 -->
    <van-popup :show="TimeShow" round position="bottom" custom-style="height: 50%" @close="TimeClose">
      <van-datetime-picker type="datetime" :value="createTime" @confirm="oncreateTimeConfirm" @cancel="TimeClose" />
    </van-popup>
  </view>
</template>

<script>
  import {
    removeFile,
  } from "@/api/user.js";
  import {
    getLabelDetail,
    addrecordDetail
  } from '@/api/remind.js'
  import {
    mapGetters,
    mapActions,
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        recordItem: {
          // 创建时间
          recordingTime: 0,
          // 分量
          attributeType: '',
          // 输入框
          attribute: '',
          remarks: '',
          // 标签id
          tagId: 0,
          // 我的宠物ID
          animalId: '',
        },
        selectName: '请选择',
        petShow: false,
        // 时间选择
        TimeShow: false,
        // 我的宠物
        petList: [],
        // 门店
        shopName: {},
        // 体温
        systemShow: false,
        textareaList: 0,
        // 图片
        sliderImgs: [],
        labelItem: {},
        labelName: '',
        editType: {},
        // 时间戳
        createTime: 0
      };
    },
    onLoad(option) {
      console.log(option)
      if(option.animalId) {
        this.recordItem.animalId = option.animalId
        this.selectName = option.productName
        // this.recordItem.createTime = this.$util.formatDateTime(new Date())
      }
      this.recordItem.tagId = option.id
      this.labelName = option.name
      uni.setNavigationBarTitle({
        title: '添加' + this.labelName + '记录'
      })

      // console.log(this.$util.formatDateTime(new Date()))
      // 获取门店
      this.$eventHub.$on('emit', (data) => {
        this.shopName = data
      });

      // 获取标签详情
      this.labelItemType()

      // 编辑数据
      this.editType = uni.getStorageSync('editType')
      uni.removeStorageSync('editType')
      if (this.editType) {
        // console.log(this.editType)
        this.sliderImgs = this.editType.sliderImgs.length != 0 ? this.imgArrArr(this.editType.sliderImgs) : [],
          this.selectName = this.editType.animal.productName
        this.recordItem = this.editType
        this.textareaList = this.editType.remarks.length
      } else {
        this.recordItem.recordingTime = this.$util.formatDateTime(new Date())
      }
      this.createTime = new Date(this.recordItem.recordingTime).getTime()
      this.recordItem.recordingTime = this.recordItem.recordingTime.substr(0, 16)
    },
    computed: {
      ...mapGetters('m_pet', ['getRecordItem']),
      ...mapGetters('m_user', ['isLogin', 'userInfo']),
    },
    methods: {
      // 获取标签详情
      labelItemType() {
        getLabelDetail(this.recordItem.tagId).then(res => {
          this.labelItem = res.data
          if (this.labelItem.configs) {
            this.labelItem.configs.forEach((item, i) => {
              if (item.valueType == 'radio') {
                item.value = item.value.split(',')
                if (!this.editType) {
                  this.recordItem.attributeType = item.value[0]
                }
              }
              if (item.valueType == 'select') {
                item.value = item.value.split(',')
                if (!this.editType) {
                  this.recordItem.attributeType = item.value[0]
                }
              }
            })
          }
        }).catch(err => {
          this.$util.Tips({
            title: err
          });
        })
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      textareaInput(e) {
        // console.log(e)
        this.textareaList = e.detail.cursor
        this.recordItem.remarks = e.detail.value.trim()
      },
      getImg(imageData, type) {
        // console.log(imageData + '555')
        // console.log(this.sliderImgs)
        let self = this;
        self.$util.uploadImageOne('blade-resource/oss/endpoint/put-file', function(res) {
          if (imageData.length < 9) {
            const data = JSON.parse(res)
            imageData.push(data.data)
            // console.log(data)
          } else {
            self.$util.Tips({
              title: '图片最多传九张哦 ~'
            });
          }
        });
      },
      CloseImage(data, i) {
        // console.log(event)
        // console.log(this.Pet.labelItem.sliderImgs[i].name.substr(7))
        removeFile(data[i].name).then(res => {
          // console.log(res)
          if (res.code !== 200) return uni.showToast({
            title: "删除失败"
          })
          data.splice(i, 1)
          // console.log(data)
        })
      },
      selectionClick(item1) {
        // console.log(item1)
        this.recordItem.attributeType = item1
      },
      InputClick(e, i) {
        console.log(e)
        this.recordItem.attribute = e.detail
      },
      // 体重
      oncolumnsConfirm(e) {
        // console.log(e)
        this.recordItem.attributeType = e.detail.value
        this.systemShow = false
      },
      oncolumnsClose() {
        this.systemShow = false
      },
      petConfirm(e) {
        // console.log(e)
        this.selectName = e.detail.value
        this.recordItem.animalId = this.getRecordItem[e.detail.index].id
        this.petShow = false
      },
      petClose() {
        this.petShow = false
      },
      petShowClick() {
        this.petShow = true
        // console.log(this.getRecordItem)
        this.getRecordItem.forEach(item => {
          this.petList.push(item.productName)
        })
      },
      TimeClose() {
        this.TimeShow = false
      },
      TimeShowClick() {
        this.TimeShow = true
      },
      oncreateTimeConfirm(e) {
        // console.log(e.detail)
        this.TimeShow = false
        this.createTime = e.detail
        this.recordItem.recordingTime = this.$util.formatDateTime(new Date(e.detail)).substr(0, 16)
      },
      addPublished() {
        const sliderImgs = []
        this.sliderImgs.forEach(item => {
          sliderImgs.push(item.link)
        })
        if (!this.editType.id) {
          const queryType = {
            shopId: this.shopName.id,
            recordingTime: this.recordItem.recordingTime,
            remarks: this.recordItem.remarks,
            sliderImgs: sliderImgs.join(','),
            attributeType: this.recordItem.attributeType,
            attribute: this.recordItem.attribute,
            animalId: this.recordItem.animalId,
            tagId: this.recordItem.tagId
          }
          // console.log(queryType)
          addrecordDetail(queryType).then(res => {
            // console.log(res)
            uni.redirectTo({
              url: '/subpkg/health/health?recordId=' + this.recordItem.animalId + '&name=' + this.selectName
            })
            this.$util.Tips({
              title: '发布' + this.labelName + '记录成功！'
            });
          }).catch(err => {
            this.$util.Tips({
              title: err
            });
          })
        } else {
          const queryType = {
            shopId: this.shopName.id,
            recordingTime: this.recordItem.recordingTime,
            remarks: this.recordItem.remarks,
            sliderImgs: sliderImgs.join(','),
            attributeType: this.recordItem.attributeType,
            attribute: this.recordItem.attribute,
            animalId: this.recordItem.animalId,
            tagId: this.recordItem.tagId,
            id: this.editType.id
          }
          // console.log(queryType)
          addrecordDetail(queryType).then(res => {
            // console.log(res)
            uni.redirectTo({
              url: '/subpkg/health/health?recordId=' + this.recordItem.animalId + '&name=' + this.selectName
            })
            this.$util.Tips({
              title: '修改' + this.labelName + '记录成功！'
            });
          }).catch(err => {
            this.$util.Tips({
              title: err
            });
          })
        }
      },
      // 优化 从后台回显的图片数据
      imgArrArr(num) {
        const img = []
        num.forEach(item => {
          img.push({
            link: item,
            name: item.substr(50)
          })
        })
        return img
      },
    }
  }
</script>

<style lang="scss">
  /deep/ .van-cell {
    padding: 40rpx 0 !important;
    align-items: center;
    width: 100% !important;
    font-size: 30rpx !important;
    overflow: hidden;
  }

  /deep/ .van-cell__value {
    color: rgba(61, 61, 61, 1) !important;
  }

  /deep/ .van-popup {
    overflow: hidden;
  }

  /deep/ .van-picker {
    padding: 24rpx;
    font-size: 36rpx;

    .van-picker__cancel,
    .van-picker__confirm {
      color: rgba(61, 61, 61, 1);
      font-size: 34rpx;
    }

    .van-ellipsis {
      font-size: 32rpx;
    }
  }

  .container {
    .container_box {
      padding: 0 24rpx 168rpx;
    }

    .selection {
      padding: 43rpx 0;
      border-bottom: 1px solid #f8f8f8;

      .selection_title {
        color: rgba(61, 61, 61, 1);
      }

      .selection_box {
        margin-top: 30rpx;

        .selection_box_Item:last-child {
          margin-right: 0 !important;
        }

        .selection_box_Item {
          padding: 8rpx 25rpx;
          border-radius: 211rpx;
          margin-right: 25rpx;
          color: rgba(61, 61, 61, 0.6);
          background-color: rgba(61, 61, 61, 0.08);
          font-size: 30rpx;
        }

        .active {
          background-color: rgba(253, 211, 56, 1) !important;
          color: rgba(61, 61, 61, 1) !important;
        }
      }
    }

    .container_radio {
      display: flex;
      justify-content: flex-end;

      .container_radio_GG:first-child {
        margin-left: 0 !important;
      }

      .container_radio_GG {
        padding: 0rpx 18rpx;
        height: 47rpx;
        background-color: rgba(61, 61, 61, 0.1);
        border-radius: 211rpx;
        text-align: center;
        line-height: 47rpx;
        margin-left: 22rpx;
        color: rgba(61, 61, 61, 0.5);
        font-size: 30rpx;
      }

      .container_radio_active {
        color: #000;
        background-color: rgba(253, 211, 56, 1);
      }
    }

    .describe {
      padding: 43rpx 0;

      .describe_title {
        color: rgba(61, 61, 61, 1);
      }

      .container_input {
        position: relative;
        width: 704rpx;
        height: 380rpx;
        background-color: rgba(247, 247, 247, 1);
        border-radius: 10rpx;
        margin-top: 20rpx;
        padding: 29rpx 36rpx;
        box-sizing: border-box;
        font-size: 26rpx;


        .container_input_box {
          height: 260rpx !important;
        }

        .container_input_abso {
          position: absolute;
          bottom: 30rpx;
          right: 50rpx;
          color: rgba(61, 61, 61, 0.5);
        }

        .minImage {
          position: absolute;
          bottom: 30rpx;
          left: 50rpx;
          width: 40rpx;
          height: 36rpx;
        }

        .minImage1 {
          left: 150rpx;
        }
      }
    }

    .container_image {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .container_image_box:nth-child(4n) {
        margin-right: 0rpx;
      }

      .container_image_box {
        position: relative;
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        // margin-bottom: 20rpx;
        // overflow: hidden;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        // background-color: #007AFF;
        // box-sizing: border-box;


        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }

        .minImage {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
        }
      }

      .container_image_addbox {
        display: flex;
        align-items: center;
        margin-top: -16rpx;

        text {
          color: rgba(61, 61, 61, 0.5);
          font-size: 28rpx;
          margin-left: 37rpx;
        }
      }

      .container_image_add {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 160rpx;
        height: 160rpx;
        background-color: rgba(245, 245, 245, 1);
        border-radius: 10rpx;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }

    .container_btn {
      position: fixed;
      bottom: 0rpx;
      width: 100%;
      padding: 0 24rpx;
      box-sizing: border-box;
      background-color: #fff;

      button {
        height: 96rpx;
        line-height: 96rpx;
        background-color: rgba(253, 211, 56, 1);
        border-radius: 226rpx;
        margin: 30rpx 0;
        font-size: 36rpx;
        font-weight: 500;
      }

      .container_btn_box {
        background-color: rgba(253, 211, 56, 0.5);
      }
    }
  }
</style>
